import { memo, useCallback } from "react";
 
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { RoomItem } from "../../../home/cnps/room";
import { RoomWrapper } from "./style";
import { RoomListWrapper } from "../../../../components/room-list/style";
import { changeRoomInfo } from "../../../../store/moduels/detail";


export const EntireRoomList = memo(
    (props) => {

        const {roomlist,totalCount,isLoading} = useSelector((state) => {
            return {
                totalCount: state.entire.totalCount,
                roomlist: state.entire.roomlist,
                isLoading:state.entire.isLoading
            }
        },shallowEqual)
        
        //点击将数据存到store中
        const dispatch = useDispatch();
        const itemClick = (item) => {
            //将数据使用store存储起来
            dispatch(changeRoomInfo(item));
         }
      
        return (
            <RoomWrapper>
                  <div className="header">
                    <h2>{`共有${totalCount}处房源`}</h2>  
                   </div>
                    <RoomListWrapper>
                           {roomlist.map((item, index) => {
                    return (
                        <RoomItem itemData={item} itemwidth={20} key={item.id} itemClick={()=>itemClick(item)}></RoomItem>
                  )
                           })}
                    {/* 加上蒙版 */}
                  {console.log("isLoading:",isLoading)}
                  {isLoading&&<div className="cover"></div>}
                  </RoomListWrapper>
                
             </RoomWrapper>
        )
    }
)